<!-- 左侧导航栏 -->
<template>
  <div class="side-bar">
    <el-menu
      :default-active="currentActive"
      class="el-menu-vertical-demo"
      @select="menuSelected"
      :unique-opened="true"
      :router="true"
      :collapse="isCollapse"
    >
      <el-menu-item-group>
        <!-- <template #title>
          <div class="side-bar-title">
            <img src="../assets/img/logo.png" alt="" width="82px" />
            {{ title }}
          </div>
        </template> -->
        <template v-for="item in menus">
          <!-- 标题 -->
          <template v-if="item.children !== undefined">
            <el-sub-menu :key="item.path" :index="item.path">
              <template #title>
                <el-icon>
                  <component :is="item.icon"></component>
                </el-icon>
                <span>
                  {{ $t(item.title) }}
                </span>
              </template>
              <el-menu-item v-for="t in item.children" :index="t.path" :key="t.path">
                {{ $t(t.title) }}
              </el-menu-item>
            </el-sub-menu>
          </template>
          <!-- 选项 -->
          <template v-else>
            <el-menu-item :key="item.path" :index="item.path">
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <template #title>
                {{ $t(item.title) }}
              </template>
            </el-menu-item>
          </template>
        </template>
      </el-menu-item-group>
    </el-menu>

    <!-- <div class="side-bar-bottom" v-if="!isCollapse">
      <div>
        <el-icon><QuestionFilled /></el-icon>
        {{ $t('Message.Menu.Help') }}
      </div>
      <div>
        <el-icon><Share /></el-icon>
        {{ $t('Message.Menu.Share') }}
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

// 子组件传值
const emit = defineEmits(['getMenuData'])

const props = defineProps({
  // 菜单列表
  menus: {
    type: Array,
    default: () => {
      return []
    },
  },
  // title
  title: {
    type: String,
    default: '',
  },
  url: {
    type: String,
    default: '',
  },
  isCollapse: {
    type: Boolean,
    default: true,
  },
})

const menuSelected = (indexPath) => {
  console.log(indexPath)
  emit('getMenuData', indexPath)
}

const route = useRoute()
const currentActive = computed(() => {
  const { meta, path } = route
  if (meta.activeMenu) {
    return meta.activeMenu
  }
  return path
})
</script>

<style lang="scss"></style>
